<template>
    <h2>Child的组件</h2>
    <h4>msg:{{msg}}</h4>
    <button @click="msg++">加加加</button>
</template>
<script setup>
import { 
  ref ,
  reactive ,
  computed ,
  watch,
  onBeforeMount,
  onMounted,
  onUpdated,
  onBeforeUpdate,
  onBeforeUnmount,
  onUnmounted
  } from 'vue'
 // Vue3.0中生命周期都是写在setup内部
  // VUe3.0 destroyed befotrDestory 移除了 
  // beforeCreate created 被setup给代替了
  // 组件销毁时候触发 如果当前组件里面有定时器 那么即使移除 不然一直存在
  onBeforeMount(()=>{
    console.log("onBeforeMount")
  })
  onMounted(()=>{
    console.log("onMounted")
  })
  onUpdated(()=>{
    console.log("onUpdated")
  })
  onBeforeUpdate(()=>{
    console.log("onBeforeUpdate")
  })
  onBeforeUnmount(()=>{
    console.log("onBeforeUnmount")
  })
  onUnmounted(()=>{
    console.log("onUnmounted")
  })
    let msg = ref(1);
</script>